<template>
  <div class="home" v-loading="homeStore.loading">
    <div class="header flex flex-justify-content-between flex-align-center">
      <div class="left">
        {{
          titleName
        }}日报监测看板（{{
          time

        }}）
      </div>
      <div class="right flex flex-align-center">
        <div class="select-Item flex flex-align-center">
          <div class="label">选择平台</div>
          <el-select
              class="ml-4"
              v-model="platformId"
              placeholder="请选择平台"
              size="large"
              style="width: 240px"
              clearable
              @change="choosePlatForm"
          >
            <el-option
                v-for="item in homeStore.platformOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
        <div class="select-Item flex flex-align-center ml-6">
          <div class="label">选择时间</div>
          <el-date-picker
              class="ml-4"
              :disabled-date="disableDate"
              v-model="homeStore.date"
              type="date"
              size="large"
              clearable
              placeholder="请选择时间"
              value-format="YYYY-MM-DD"
          />
        </div>
        <button class="btn-baseStyle ml-4 btn-Primary" @click="inquire">查询</button>
      </div>
    </div>
    <div class="content mt-6 ">
      <div class="flex flex-justify-content-between flex-align-stretch flex-wrap">
        <div style="width: 26.8%">
          <item-style1
              ref="itemStyle1Ref"
          >
          </item-style1>
        </div>
        <div style="width: 44.4%;">
          <item-style2
              ref="itemStyle2Ref"
          >
          </item-style2>
        </div>
        <div style="width: 26.8%" v-if="homeStore.platformId==0">
          <base-item title="话务接通情况">
            <template #content>
              <table-item
                  dataListtype="1"
                  :table-data="homeStore.ysx.hwTableData"
                  :table-header="homeStore.ysx.hwTableHeader"
              >
              </table-item>
            </template>
          </base-item>
        </div>
        <div style="width: 26.8%" v-if="homeStore.platformId==1">
          <base-item title="诉求热点排名情况">
            <template #content>
              <table-item
                  :span-method="sqrdSpanMethod"
                  :table-data="homeStore.sczt.otherTbale.hotEventRankInfo.dataList"
                  :table-header="homeStore.sczt.otherTbale.hotEventRankInfo.headers"
              >
              </table-item>
            </template>
          </base-item>
        </div>
        <div class="mt-5" style="width: 72.21%">
          <item-style3
              ref="itemStyle3Ref"
          >
          </item-style3>
        </div>
        <div class="mt-5" style="width: 26.8%">
          <item-style4 ref="itemStyle4Ref"></item-style4>
        </div>
      </div>
      <div class="gridBox mt-5" v-if="homeStore.platformId==0">
        <item-style5
            title="重点关注事项及弱信号受理情况"
            :data="homeStore.ysxResult"
            :tabbarList="itemStyle5TabbarList"
            ref="itemStyle5Ref">
        </item-style5>
        <base-item title="当天逾期办理情况" v-if="homeStore.ysx.otherTbale[dtyqValue].headers">
          <template #content>
            <table-item
                dataListtype="1"
                :table-data="homeStore.ysx.otherTbale[dtyqValue].dataList"
                :table-header="homeStore.ysx.otherTbale[dtyqValue].headers.map((item)=>{
                    return item=='工单标题' ? changeWidth(item,300):changeWidth(item)
                  })"
            >
            </table-item>
          </template>
          <template #right>
            <header-tabbar :list="dtyqBarList" v-model="dtyqValue"></header-tabbar>
          </template>
        </base-item>
        <base-item title="当天退件情况" v-if="homeStore.ysx.otherTbale.backEventInfo">
          <template #content>
            <table-item
                v-if="homeStore.ysx.otherTbale.backEventInfo.headers"
                :dataListtype="1"
                :table-data="homeStore.ysx.otherTbale.backEventInfo.dataList"
                :table-header="homeStore.ysx.otherTbale.backEventInfo.headers.map((item)=>{
                    return item=='退件部门' ? changeWidth(item,500):changeWidth(item)
                  })"
            >
            </table-item>
          </template>
        </base-item>
        <item-style6 ref="itemStyle6Ref"></item-style6>
        <base-item title="质检抽查情况">
          <template #content>
            <table-item
                :table-data="homeStore.ysx.otherTbale.qcInfo.dataList"
                :table-header="homeStore.ysx.otherTbale.qcInfo.headers"
            >
            </table-item>
          </template>
        </base-item>
        <base-item title="系统运营情况">
          <template #content>
            <div v-if="xtyyValue=='callBackInfo' && homeStore.ysx.otherTbale[xtyyValue].dataList" class="grid"
                 style="grid-template-columns: 1fr 1fr;grid-gap: 30px">
              <table-item
                  :table-data="[...homeStore.ysx.otherTbale[xtyyValue].dataList].splice(0,5)"
                  :table-header="homeStore.ysx.otherTbale[xtyyValue].headers"
              >
              </table-item>
              <table-item
                  :table-data="[...homeStore.ysx.otherTbale[xtyyValue].dataList].splice(5)"
                  :table-header="homeStore.ysx.otherTbale[xtyyValue].headers"
              >
              </table-item>
            </div>
            <table-item
                v-else
                :table-data="homeStore.ysx.otherTbale[xtyyValue].dataList"
                :table-header="homeStore.ysx.otherTbale[xtyyValue].headers"
            >
            </table-item>
          </template>
          <template #right>
            <header-tabbar :list="xtyyBarList" v-model="xtyyValue"></header-tabbar>
          </template>
        </base-item>
      </div>
      <div v-else style="width: 100%">
        <div class="gridBox mt-5">
          <item-style5
              title="重点关注事项"
              :data="homeStore.scztResult.importantEventInfo"
              ref="itemStyle5Ref">
          </item-style5>
          <item-style5
              title="政策咨询及兑现情况"
              :data="homeStore.scztResult.policyInfo"
              ref="itemStyle5Ref">
          </item-style5>
        </div>
        <base-item title="不满意事项办理情况" class="mt-5">
          <template #content>
            <table-item
                :table-data="homeStore.sczt.otherTbale.bmyEventInfo.dataList"
                :table-header="homeStore.sczt.otherTbale.bmyEventInfo.headers"
            >
            </table-item>
          </template>
        </base-item>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
//组件
import TableItem from "@/views/home/compoments/tableItem.vue";
import BaseItem from "@/views/home/compoments/baseItem.vue";
import ItemStyle1 from "@/views/home/compoments/itemStyle1.vue";
import ItemStyle2 from "@/views/home/compoments/itemStyle2.vue";
import ItemStyle3 from "@/views/home/compoments/itemStyle3.vue";
import ItemStyle4 from "@/views/home/compoments/itemStyle4.vue";
import ItemStyle5 from "@/views/home/compoments/itemStyle5.vue";
import ItemStyle6 from "@/views/home/compoments/itemStyle6.vue";
import HeaderTabbar from "@/views/home/compoments/headerTabbar.vue";

//接口


//api
import * as echarts from 'echarts';
import {reactive, ref, onMounted, nextTick, computed} from 'vue';
import useSystemStore from "@/store/modules/system/system";
import useHomeStore from "@/store/modules/home/home";
import {TableColumnCtx} from "element-plus";
import {timestampToWeek, timestampToDateCN} from "@/utils/dateUtilsT";

//data
const systemStore = useSystemStore()
const homeStore = useHomeStore()
const itemStyle1Ref = ref()
const itemStyle2Ref = ref()
const itemStyle3Ref = ref()
const itemStyle4Ref = ref()
const itemStyle5Ref = ref()
const itemStyle6Ref = ref()

let titleName = computed(() => {
  let item = homeStore.platformOptions.find((item) => {
    return item.value == homeStore.platformId
  })
  return item!.label
})

const itemStyle5TabbarList = ref<{ label: string, value: string }[]>([
  {
    label: '重点关注事项',
    value: 'importantEventInfo',
  },
  {
    label: '弱信号',
    value: 'weakSignalInfo',
  },
])

//当天逾期办理情况
const dtyqBarList = ref<{ label: string, value: string }[]>([
  {
    label: '逾期未初次回复',
    value: 'overTimeNotReplyInfo',
  },
  {
    label: '逾期未办结',
    value: 'overTimeNotBjInfo',
  },
])

const dtyqValue = ref(dtyqBarList.value[0].value)

//当天退件情况
const xtyyBarList = ref<{ label: string, value: string }[]>([
  {
    label: '全面回访情况',
    value: 'callBackInfo',
  },
  {
    label: '硬件网络巡查情况',
    value: 'hardwareInfo',
  },
  {
    label: '系统运维情况',
    value: 'systemInfo',
  },
])

const xtyyValue = ref(xtyyBarList.value[0].value)

interface User {
  '序号': string
  '诉求类型': string
  '诉求热点': string
  '数值': string
}

interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}

let spanArr: any[] = []

let platformId = ref(0)

let time = ref()
time.value = timestampToDateCN(homeStore.date)
/*
函数
*/

/**************************接口函数**************************/


/**************************操作函数**************************/
const changeWidth = (name: string, width: string | number = 'auto') => {
  return {prop: name, label: name, width}
}

const choosePlatForm = () => {
  // if (homeStore.platformId === 0) {
  //   homeStore.useGetHomeDataYSx()
  // } else {
  //   homeStore.useGetScxtDayStsData()
  // }
  // itemStyle3Ref.value.initEcahts()
}

const disableDate = (val: any) => {
  let current = new Date().getTime()
  let dateVal = new Date(val).getTime()+1000*60*60*24
  if (dateVal > current) {
    return true
  }
}

const getSpanArr = () => {
  let data = homeStore.sczt.otherTbale.hotEventRankInfo.dataList
  for (let i = 0; i < data.length; i++) {
    if (data[i + 1]) {
      // console.log(data[i]['诉求类型'])
      if (data[i]['诉求类型'] != data[i + 1]['诉求类型']) {
        spanArr.push(i)
      }
    } else {
      spanArr.push(i)
    }
  }
  // console.log(spanArr)
  let arrr = []
  for (let i = 0; i < spanArr.length; i++) {
    if (i == 0) {
      let obj = {
        end: spanArr[i] + 1,
        start: 0
      }
      arrr.push(obj)
    } else if (i === spanArr.length - 1 && i > 2) {
      let obj = {
        start: spanArr[i],
        end: data.length
      }
      arrr.push(obj)
    } else {
      let obj = {
        end: spanArr[i] + 1,
        start: spanArr[i - 1] + 1
      }
      arrr.push(obj)
    }
  }
  spanArr = arrr
  // console.log(spanArr)
}

const sqrdSpanMethod = ({
                          row,
                          column,
                          rowIndex,
                          columnIndex,
                        }: SpanMethodProps) => {
  spanArr = []
  if (columnIndex === 1) {
    getSpanArr()
    let idx = spanArr.findIndex(item => rowIndex == item.start)

    if (idx != -1) {
      console.log(spanArr[idx].end - spanArr[idx].start, rowIndex)
      return {
        rowspan: spanArr[idx].end - spanArr[idx].start,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
  // if (columnIndex === 1) {
  //   if (rowIndex == 0) {
  //     return {
  //       rowspan: 12,
  //       colspan: 1,
  //     }
  //   } else {
  //     return {
  //       rowspan: 0,
  //       colspan: 0,
  //     }
  //   }
  // }
}
const inquire = async () => {
  homeStore.platformId = platformId.value
  time.value = timestampToDateCN(homeStore.date)
  if (homeStore.platformId === 0) {
    await homeStore.useGetHomeDataYSx()
  } else {
    await homeStore.useGetScxtDayStsData()
  }
  initFun()
}

const initFun = () => {
  itemStyle1Ref.value.initEcahts()
  itemStyle2Ref.value.getData(homeStore.platformId)
  itemStyle3Ref.value.initEcahts()
  itemStyle4Ref.value.initEcahts()
  homeStore.platformId == 0 && itemStyle6Ref.value.getData()
  homeStore.loading = false

}
const initPage = async () => {
  await homeStore.useGetHomeDataYSx()
  await homeStore.useGetScxtDayStsData()
  initFun()
}
initPage()

</script>

<style lang="scss" scoped>
.home {
  .header {
    box-shadow: $shadowOne;
    padding: 19px 28px;
    background-image: url("../../assets/img/home/bg.png");
    background-size: auto 100%;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-color: white;
    border-radius: 15px;

    .left {
      font-size: 25px;
      font-weight: bold;
      color: white;
    }

    .right {
      .select-Item {
        .label {
          font-size: 18px;
          color: rgb(136, 136, 136);
        }
      }
    }
  }

  .content {
    .gridBox {
      width: 100%;
      display: grid;
      grid-template-columns: 49.5% 49.5%;
      grid-gap: 20px;
    }
  }
}
</style>
